import { Button, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import EasyMahjongGroup from 'components/Mahjong/easyGroup';
import { DeleteTwoTone, EditTwoTone, SaveTwoTone } from '@ant-design/icons';
import { getCardsDetail, addCards } from 'api/cards';
import { useLocation, useNavigate } from 'react-router-dom';
import Prompt, { PromptMethods } from 'components/Prompt';

const TOOLS_CARDLIST = [...new Array(34).fill(undefined).map((i, id) => id + 1), 98, 99];
const BORDER_BOX_CLASS = ' border border-solid border-gray-300 flex ';
const TITLE_BOX_CLASS = ' bg-white min-h-8 flex items-center px-2 sticky top-0';
export default function () {
	const [deck, setdeck] = useState<Array<number>>([]);
	const [linner, setlinner] = useState<any>({});
	const [partition, setpartition] = useState<Array<number>>([]);
	const [avtivelinner, setavtivelinner] = useState<Array<number>>([]);
	const [appear, setappear] = useState<Array<number>>([]);
	const { state }: { state: any } = useLocation();

	const navigator = useNavigate();
	const promptRef = useRef<PromptMethods>(null);

	useEffect(() => {
		if (!state || !state.id) return;
		getCardsDetail(state.id).then(({ deck, linner, partition }: any) => {
			setdeck(deck);
			setlinner(linner);
			setpartition(partition);
		});
	}, []);

	const SubmitLinner = (
		<Button
			onClick={() => {
				linner[avtivelinner.join(',')] = appear;
				setlinner({ ...linner });
				setavtivelinner([]);
				setappear([]);
			}}
			className='step-3'
			disabled={!avtivelinner.length || !appear.length}
			size='small'>
			提交监听
		</Button>
	);

	return (
		<div className={`${BORDER_BOX_CLASS} flex-row  ${process.env.NODE_ENV === 'production' ? 'bg-green-700' : ''}`}>
			<Prompt innerRef={promptRef} />
			<div className='flex-1 w-0 flex flex-col'>
				{/* 牌型区 */}
				<div className={`${BORDER_BOX_CLASS} overflow-y-scroll step1 flex-col ${appear.length ? 'h-32' : 'h-96'} `}>
					<div className={TITLE_BOX_CLASS}>
						<span className=' mr-auto font-bold'>基础牌</span>
						<Button
							onClick={() => {
								setdeck([]);
							}}
							className='step2'
							size='small'
							title='清空'
							icon={<DeleteTwoTone />}></Button>
					</div>
					<div className=' p-2'>
						{EasyMahjongGroup({
							list: deck,
							margins: partition,
							leftclick: (id: number) => {
								if (!id) return;
								avtivelinner.push(id);
								setavtivelinner([...avtivelinner]);
							},
							rightlick: (id: any, index: number) => {
								const hasindex = partition.indexOf(index);
								if (~hasindex) partition.splice(hasindex, 1);
								else partition.push(index);
								setpartition([...partition]);
							},
							close: (id: number, index: number) => {
								deck.splice(index, 1);
								setdeck([...deck]);
							},
						})}
					</div>
				</div>
				{/* 编辑听牌区 */}
				<div className={`${BORDER_BOX_CLASS} overflow-y-scroll flex-col flex-1 h-0 `}>
					<div className={TITLE_BOX_CLASS}>
						<span className='font-bold'>监听出牌</span>
						<div className=' ml-2 mt-2 overflow-x-scroll overflow-y-hidden w-0 flex-1 flex flex-nowrap'>
							{EasyMahjongGroup({
								list: avtivelinner,
								close: (id: number, index: number) => {
									avtivelinner.splice(index, 1);
									setavtivelinner([...avtivelinner]);
								},
							})}
						</div>
						{SubmitLinner}
						<Button
							onClick={() => {
								setavtivelinner([]);
								setappear([]);
							}}
							className=' ml-2'
							size='small'
							title='清空'
							icon={<DeleteTwoTone />}></Button>
					</div>
					<div className=' p-2'>
						{EasyMahjongGroup({
							list: appear,
							close: (id: number, index: number) => {
								appear.splice(index, 1);
								setappear([...appear]);
							},
						})}
					</div>
				</div>
			</div>
			<div className='flex-shrink-0 flex flex-col'>
				{/* 已监听区 */}
				<div className={`${BORDER_BOX_CLASS} overflow-y-scroll flex-col flex-1 h-0`}>
					<div className={TITLE_BOX_CLASS}>
						<span className=' mr-auto font-bold'>监听牌</span>
					</div>
					<div className=' p-2'>
						{Object.keys(linner).map((e: any, i: number) => (
							<div className=' bg-white p-1 mb-2' key={'linner' + i}>
								{EasyMahjongGroup({ list: e.split(',') })}
								<br />
								<Button
									onClick={() => {
										setavtivelinner(e.split(','));
										setappear(linner[e]);
									}}
									size='small'
									title='编辑'
									icon={<EditTwoTone />}></Button>
								<Button
									onClick={() => {
										delete linner[e];
										setlinner({ ...linner });
									}}
									className=' ml-2'
									size='small'
									title='删除'
									icon={<DeleteTwoTone />}></Button>
							</div>
						))}
					</div>
				</div>
				{/* 操作区 */}
				<div className={`${BORDER_BOX_CLASS} bg-white grid grid-cols-9 gap-0.5  p-2`}>
					{EasyMahjongGroup({
						list: TOOLS_CARDLIST,
						leftclick: (id: number) => {
							if (avtivelinner && avtivelinner.length) {
								// 编辑听牌
								appear.push(id);
								setappear([...appear]);
							} else {
								// 编辑牌型
								deck.push(id);
								setdeck([...deck]);
							}
						},
					})}
				</div>

				<div className={BORDER_BOX_CLASS + ' bg-white p-1 flex gap-2 justify-end'}>
					{/* <Button onClick={help} size='small' danger>
						帮助
					</Button> */}
					<Button
						size='small'
						icon={<DeleteTwoTone />}
						onClick={() => {
							setdeck([]);
							setlinner({});
							setpartition([]);
							setavtivelinner([]);
							setappear([]);
						}}>
						清空
					</Button>
					{SubmitLinner}
					<Button
						size='small'
						icon={<SaveTwoTone />}
						onClick={async () => {
							promptRef.current?.prompt({
								title: '创建牌型',
								content: [
									{
										label: '请输入牌型名称',
										name: 'name',
										rules: [{ required: true, message: '请输入牌型名称' }],
										type: 'text',
									},
								],
								onOk: async ({ name }: any) => {
									if (!name) return;
									await addCards({
										...state,
										deck,
										linner,
										partition,
										name,
									});
									message.success('保存成功');
									navigator('../cardslist');
								},
							});
						}}>
						保存
					</Button>
				</div>
			</div>
		</div>
	);
}
